<template>
  <common-drawer :width="800" :visible="visible" title="消息内容" @close="updateVisible(false)">
    <a-form
      ref="form"
      :model="state.form"
      layout="horizontal"
      :label-col="{ md: { span: 4 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 20 }, sm: { span: 24 } }"
    >
      <a-form-item label="" name="fileCode">
        <a-textarea
          disabled
          style="height: 100px"
          v-model:value="state.form.content"
          placeholder="详情"
          allow-clear
        />
      </a-form-item>
    </a-form>
  </common-drawer>
</template>

<script lang="ts" setup>
import { ref, toRefs, reactive, watch, nextTick, onMounted } from 'vue';
import CommonDrawer from '/@/components/CommonDrawer/index.vue';
const props = defineProps<{
  // 弹窗是否打开
  visible: Boolean;
  // 修改回显的数据
  data?: Object;
}>();

const emits = defineEmits<{
  (e: 'update:visible', visible: boolean): void;
}>();

const state = reactive({
  // 表单数据
  form: {},
});

watch(
  () => props.data,
  (val) => {
    state.form = Object.assign({}, props.data);
  },
);

/**
 * 更新编辑界面弹框是否显示
 *
 * @author fengshuonan
 * @date 2021/6/14 20:24
 */
const updateVisible = (value: boolean) => {
  emits('update:visible', value);
};
</script>
